<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta charset="utf-8"/>
	<link href="../css/styles.css" rel="stylesheet" />
	
	<style>
		
		fieldset div {
			position: relative;
			zoom: 1;
			padding: 5px;
			border: 1px solid #000;
			margin: 5px 0;
		}
		fieldset div:after {
			content: " ";
			display: block;
			clear: both;
		}
		input.user-error,
		select.user-error,
		textarea.user-error {
			border-color: #800;
		}
		input.user-success,
		select.user-success,
		textarea.user-success {
			border-color: #080;
		}
		span.input-datetime-local.user-error {
			box-shadow: 1px 1px 1px #800;
		}
		span.input-datetime-local.user-success {
			box-shadow: 1px 1px 1px #080;
		}
		
	</style>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="../js-webshim/minified/extras/modernizr-custom.js"></script>
	<script src="../js-webshim/minified/polyfiller.js"></script> 
	
	
	
	<!--
		<script src="../../src/polyfiller.js"></script> 
		<script>
			$.webshims.debug = 'noCombo';
			//style calendar, datalist, validation bubble
			//$('html').on('wspopoverbeforehide', false);
		</script>
	-->
	<script>
		$.webshims.setOptions('forms', { 
			customMessages: true,
			iVal: {fieldWrapper: '.form-element'}
		});
		
		$.webshims.setOptions('forms-ext', { 
			types: 'range date time number month color'
		});
		
		//load all defined
		//or load only a specific feature with $.webshims.polyfill('feature-name');
		$.webshims.polyfill();
		
		
		$(function(){
			var showHideFormsExt = function(){
				$('span.forms-ext-feature')[this.checked ? 'show' : 'hide']();
			};
			$('#show-forms-ext')
				.each(showHideFormsExt)
				.click(showHideFormsExt)
			;
			
		});
	</script>
	
	<script src="../demo-js/demo.js"></script>
	
	<title>HTML5 forms/Web Forms 2.0 widgets and constraint validation API : webshims lib - the polyfilling capability based loading JS library</title>
	
</head>

<body>
		<header>
			<hgroup>
				<h1>Webshims Lib</h1>
				<h2>Polyfill only the incapable browsers</h2>
			</hgroup>
			<nav>
				<ul>
					<li><a href="../index.html">home</a></li>
				</ul>
			</nav>
		</header>
		<div class="main">
		<nav>
			<ul>
				<li><a href="shiv.html">HTML5 shiv and innerShiv</a></li>
				<li><a href="es5.html">ES5/JavaScript 1.8.5</a></li>
				<li><strong>constraint validation and input widgets</strong></li>
				<li><a href="canvas.html">canvas</a></li>
				<li><a href="mediaelement.html">mediaelement</a></li>
				<li><a href="json-storage.html">storage and JSON</a></li>
				<li><a href="geolocation.html">geolocation API</a></li>
				<li><a href="details.html">details &amp; summary</a></li>
			</ul>
		</nav>
		<div class="main-box">
		<section>
			<hgroup>
				<h2>HTML5 forms</h2>
				<h3>Demo/About/Documentation of HTML5 constraint validation API</h3>
			</hgroup>
			<p>The <code>forms</code> (constraint validation without number, date etc.) and <code>forms-ext</code> (number, date, range etc.) features of the webshim lib are implementing support for the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#the-constraint-validation-api">constraint validation API</a>, some input widgets and the placeholder-attribute.</p>
			<p>The <code>forms</code> feature also implements an easy and cross browser way to control the validation UI (error message and styling the validation bubble).</p>
			<section>
				<h3>Implemented/fixed elements, attributes, properties, methods, events</h3>
				<p><label><input type="checkbox" id="show-forms-ext" checked="checked" /> show/hide <code>forms-ext</code> features</label></p>
				<ul>
					<li><strong>elements:</strong> <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-output-element">output</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-datalist-element">datalist<sup>1</sup></a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-progress-element">progress</a></li>
					<li><strong>types</strong>: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-(type=email)">email</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#url-state-(type=url)">url</a><span class="forms-ext-feature">, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#local-date-and-time-state">datetime-local</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#time-state-(type=time)">time</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#date-state-(type=date)">date</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#number-state-(type=number)">number</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#month-state-%28type=month%29">month</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#range-state-(type=range)">range</a></span></li>
					<li><strong>content attributes and properties (IDL attributes)</strong>: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-placeholder">placeholder</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-list">list</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fe-autofocus">autofocus</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fs-novalidate">novalidate (noValidate)</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-required">required</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-pattern">pattern</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#attr-textarea-maxlength">maxlength</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate (formNoValidate)</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fs-formaction">formaction (formAction)</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fs-formenctype">formenctype (formEnctype)</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fs-formmethod">formmethod (formMethod)</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fs-formtarget">formtarget (formTarget)</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#association-of-controls-and-forms">form attribute</a><span class="forms-ext-feature">, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-step">step</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-max">max</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-min">min</a></span></li>
					<li><strong>properties/IDLs</strong>: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#dom-datalist-options">options<sup>2</sup></a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#dom-progress-position">position</a>,
						<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#dom-cva-willvalidate">willValidate</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#dom-cva-validity">validity</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#dom-cva-validationmessage">validationMessage</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#dom-progress-position">position</a><span class="forms-ext-feature">, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#dom-lfe-labels">labels</a></span></li>
					<li><strong>methods</strong>: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#dom-cva-setcustomvalidity">setCustomValidity</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#dom-form-checkvalidity">checkValidity</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#dom-input-stepdown">stepUp/stepDown</a></li>
					<li><strong>events</strong>: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#constraint-validation">invalid</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-input">input</a></li>
					<li><strong>Selectors</strong>: <a href="http://www.w3.org/TR/css3-ui/#pseudo-invalid">:invalid</a>, <a href="http://www.w3.org/TR/css3-ui/#pseudo-valid">:valid</a>, <a href="http://www.w3.org/TR/css3-ui/#pseudo-required">:required</a>, <a href="http://www.w3.org/TR/selectors4/#user-pseudos">:user-error</a> <!--, <a href="http://www.w3.org/TR/css3-ui/#pseudo-optional">:optional</a><span class="forms-ext-feature"><a href="http://www.w3.org/TR/css3-ui/#pseudo-in-range">, :in-range</a>, <a href="http://www.w3.org/TR/css3-ui/#pseudo-out-of-range">:out-of-range</a></span> -->(Not for CSS, only for JS, for CSS use selectors .user-sccuess, .user-error or [required] please look into the abstractions section)</li>
				</ul>
				<ul>
					<li><small>1. You need to wrap the datalist options in a select element (datalist > select > option)! / datalist can be also switched to the <code>forms-ext</code> feature using the lightweightDatalist option.</small></li>
				</ul>
				
				<h3>Options for the <code>forms</code> feature</h3>
				<ul>
					<li><strong>customMessages</strong> (boolean): <code>false</code> (default) || <code>true</code>. If <code>customMessages</code> is set to true. Webshims Lib will implement a DOM-Property called customValidationMessage, which can be changed through the $.webshims.validityMessages-Array.</li>
					<li><strong>lazyCustomMessages</strong> (boolean): <code>false</code> (default) || <code>true</code>. Similiar to <code>customMessages</code>, but the data is loaded more lazily (good for performance). The customValidationMessage property is not always available on DOM-Ready.</li>
					<li><strong>replaceValidationUI</strong> (boolean): <code>false</code> (default) || <code>true</code>. Replaces the browser validation UI with a custom styleable UI.</li>
					<li><strong>placeholderType</strong> (string): <code>"value"</code> (default) || <code>"over"</code>. If placeholderType is set to "over", the polyfill uses the overLabel technique to create a placeholder and doesn't "pollute" the value property.</li>
					<li><strong>lightweightDatalist</strong> (boolean): <code>true</code> (default) || <code>false</code>. If <code>lightweightDatalist</code> is set to true. Webshims Lib will switch the datalist element and list property implementation from the forms-ext to the forms feature.</li>
					<li><strong>customDatalist</strong> (boolean): <code>false</code> (default) || <code>true</code>. Allows to use custom styleable datalist elements in all browsers.</li>
					<li><strong>overridePlaceholder</strong> (boolean): </li>
					<li><strong>iVal</strong> (mixed options): options for the Instant/Live form validation feature (<a href="webforms/1-webforms-lang-custom-bubble.html#instant-validation">see</a>)</li>
					<li><strong>addValidators</strong> (boolean): <code>false</code> (default) || <code>true</code>: Should Webshims implement some new custom validators. see: <a href="webforms/4-webforms-custom-validity.html">custom validity</a> </li>
				</ul>
				
				<h3>Options for the <code>forms-ext</code> feature</h3>
				<ul>
					<li><strong>replaceUI</strong> (boolean): <code>false</code> (default) || <code>true</code>. If replaceUI is set to true the number, time, month, date <!--, datetime --> and range Widgets are replaced in all browsers (also in browser, which have implemented these types). This is useful, if you want to style the UI in all browsers.</li>
					<li><strong>types</strong> (string): <code>'datetime-local month date time range number'</code>. A white space seperated string. Possible values are: datetime-local range date time number month color (Note: color is left out from the default string). If one of the listed input types is not supported. Webshims will load the forms-ext API and UI package and implement all types.</li>
					<li><strong>widgets</strong> (options): widgets is a general options object for all input options. For more information see <a href="webforms/3-webforms-widgets.html#configure-ui">here</a> </li>
					<li><strong>date</strong> (options): for more information see <a href="webforms/3-webforms-widgets.html#date-cfg">here</a></li>
					<!--<li><strong>datetime-local</strong> (options): for more information see <a href="webforms/3-webforms-widgets.html#datetime-local-cfg">here</a></li>-->
					<li><strong>month</strong> (options): for more information see <a href="webforms/3-webforms-widgets.html#month-cfg">here</a></li>
					<li><strong>number</strong> (options): for more information see <a href="webforms/3-webforms-widgets.html#number-cfg">here</a></li>
					<li><strong>time</strong> (options): for more information see <a href="webforms/3-webforms-widgets.html#time-cfg">here</a></li>
					<li><strong>range</strong> (options): for more information see <a href="webforms/3-webforms-widgets.html#range-cfg">here</a></li>
					<li><strong>color</strong> (options): </li>
				</ul>
				
				<h3>Extensions/Abstractions to the standard</h3>
				<ul>
					<li><strong>event: firstinvalid</strong>: <code>firstinvalid</code> is a simple, bubbling event, which is triggered on the first invalid form element. Preventing the default of firstinvalid will automatically prevent the default behavior of all current invalid elements.</li>
					<li><strong>event: lastinvalid</strong>: <code>lastinvalid</code> is an extended, bubbling, (but) uncancelable event, which is triggered on the last invalid form element. The property <code>invalidlist</code> is a jQuery-collection of all current invalid elements.</li>
					<li><strong>event: changedvalid/changedinvalid</strong>: Event is triggered, if the value of the element was changed and is marked as valid/invalid (see also: .form-ui-valid/.form-ui-invalid).</li>
					<li><strong>event: datalistselect</strong>:  Event is triggered on the input element, if the user selects a value from an option inside of the associated datalist (only available, if customDatalist is set to true)</li>
					<li><strong>selectors for CSS/JS: .ws-instantvalidation (.ws-invalid/.ws-cussess)</strong>: The class 'ws-instantvalidation' on a form element will implement UX improved Instant Validation for this form. The classes .ws-invalid (similiar to <a href="http://www.w3.org/TR/selectors4/#user-pseudos">:user-error</a>) and .ws-success will mark either "touched" invalid element wrappers or valid and "filled" element wrappers. <a href="webforms/1-webforms-lang-custom-bubble.html#instant-validation">see also</a></li>
					<li><strong>selectors for CSS/JS: .user-success/.user-error</strong>: which work similar to <a href="https://developer.mozilla.org/en/CSS/%3A-moz-ui-valid">:-moz-ui-valid</a>/<a href="https://developer.mozilla.org/en/CSS/%3A-moz-ui-invalid">:-moz-ui-invalid</a> or <a href="http://www.w3.org/TR/selectors4/#user-pseudos">:user-error</a></li>
					<li><strong>selectors for CSS/JS: .placeholder-visible</strong>: which work similar to <a href="https://developer.mozilla.org/en/CSS/%3A-moz-placeholder">:-moz-placeholder</a>, <a href="http://msdn.microsoft.com/en-us/ie/hh272905#_HTML5FormsVal">:-ms-input-placeholder</a> and <a href="http://css-tricks.com/snippets/css/style-placeholder-text/">::-webkit-input-placeholder</a></li>
					<li><strong>selectors for CSS: .prop-checked</strong>: which work equal to <a href="http://www.w3.org/TR/selectors4/#checked">:checked</a> pseudoclass. This class is only added, if the browser does not support the <code>:checked</code> pseudoclass (i.e. IE8-).</li>
					<li><strong>property: customValidationMessage</strong>: very similar to the standard validationMessage, but always uses built-in custom validation messages, which can be better controlled. <strong>Note: You have to set <code>customMessages</code> to true before calling the <code>polyfill</code> method, to get this new property.</strong></li>
					<li><strong>attribute: data-errormessage or -x-moz-errormessage</strong>: Attribute with text, which is used be custom validityAlert/customValidationMessage to show a custom error message for the field.</li>
					<li><strong>attribute/class: search-start</strong>: If an input[list] has the class <code>search-start</code> the value of the datalist options have to match from start (only available, if customDatalist is set to true).</li>
					<li><strong>attribute/class: mark-option-text</strong>: If an input[list] has the class <code>mark-option-text</code> the matched value/label string of the datalist options will be marked.</li>
					<li><strong>helper method: $.webshims.validityAlert.showFor</strong>: takes a DOM-Object/Selector/jQuery-Object and shows the invalid message for this element. (simply look into the prototype i.e. <code>console.log($.webshims.validityAlert)</code> to make changes)</li>
				</ul>
								
			</section>
			<section class="forms-demo">
				<h3>Simple Demo</h3>
				<fieldset>
					<legend>outside of form but associated to the form using form-attribute</legend>
				
					<div class="form-element">
						<label for="email">
							E-Mail + datalist: <dfn title="required">*</dfn>
						</label>
						<input list="datalist" name="email" required="required" type="email" id="email" form="form" />
						<datalist id="datalist">
							<select>
								<option value="yourmail@gmail.com"></option>
								<option value="yourmail@yahoo.com"></option>
								<option value="mail@some-example-domain.com"></option>
								<option value="foo@bar.baz"></option>
							</select>
						</datalist>
					</div>
					<div class="form-element">
						<label for="date">
							date: *
						</label>
						<input name="date" data-placeholder="year-month-day" type="date" id="date" required form="form" />
					</div>
					
					<div class="form-element form-item">
						<input type="checkbox" required id="checkbox" name="checkbox" form="form" />
						<label for="checkbox">
							required checkbox*
						</label>
					</div>
					
					<div class="button-wrapper">
						<input type="submit" value="Send" form="form" />
					</div>
				</fieldset>
				<hr />
				
				<form action="#" id="form">
					<p class="required"><span>*</span> Required fields</p>
					<fieldset>
						<div class="form-element">
							<label for="number">
								number: <dfn title="required">*</dfn>
							</label>
							<input name="number" required="required" placeholder="number" type="number" id="number" form="form" />
						</div>
						<div class="form-element">
							<label for="range">
								range:
							</label>
							<input name="range" type="range" id="range" />
						</div>
						
						<div class="form-element">
							<label for="month">
								month:
							</label>
							<input name="month" type="month" id="month" data-month='{"splitInput": true}' />
						</div>
						
						<div class="form-element">
							<label for="time">
								Time: 
							</label>
							<input name="time" type="time" id="time" />
						</div>
						
						<div class="form-element">
							<label for="color">
								color: 
							</label>
							<input name="color" type="color" value="#cccccc" id="color" />
						</div>
						
						<div class="form-element">
							<label for="datetime-local">
								datetime-local: 
							</label>
							<input name="datetime-local" type="datetime-local" id="datetime-local" />
						</div>
						
						<div class="form-element">
							<label for="password">
								password: 
							</label>
							<input placeholder="password" name="password" type="password" id="password" />
						</div>
						
						<div class="form-element">
							<label for="textarea">
								textarea: * ([maxlength="6"])
							</label>
							<textarea placeholder="hello this is a textbox" maxlength="6" required="required" name="textarea" id="textarea"></textarea>
						</div>
						
						<div class="form-element">
							<label for="select">
								select: *
							</label>
							<select required="required" name="select" id="select">
								<option value="">Please choose</option>
								<option>Option 1</option>
								<option>Option 2</option>
								<option>Option 3</option>
							</select>
						</div>
						
						<div class="form-element">
							<label for="number2">
								number + number = output:
							</label>
							<input step="0.5" value="0" name="number2" type="number" id="number2" />
							<input name="number3" id="number3" value="0" type="number" />
							<output id="output2"></output>
							
							<script>
								$('#number2').bind('input', function(){
									$('#output2').prop( 'value', ($(this).prop('valueAsNumber') || 0) + ($('#number3').prop('valueAsNumber') || 0) );
								});
								
								$('#number3').bind('input', function(){
									$('#output2').prop( 'value', ($(this).prop('valueAsNumber') || 0) + ($('#number2').prop('valueAsNumber') || 0) );
								});
							</script>
						</div>
						
						<div class="form-element">
							<fieldset>
								<legend> date +oninput+ range</legend>
								<input type="date" id="dateControlledByRange" value="2011-01-01" min="2011-01-01" max="2011-12-31" />
								<input type="range" id="rangeControlledByDate" value="1293840000000" min="1293840000000" max="1325289600000" step="86400000" style="margin-left: 5px; width: 400px;" />
								
							<script>
								$('#dateControlledByRange').bind('input', function(){
									$('#rangeControlledByDate').prop( 'valueAsNumber', $.prop(this, 'valueAsNumber') )
								});
								
								$('#rangeControlledByDate').bind('input', function(){
									$('#dateControlledByRange').prop( 'valueAsNumber', $.prop(this, 'valueAsNumber') )
								});
							</script>
							</fieldset>
						</div>
						
						<div class="form-element">
							<label for="progress">
								progress
							</label>
							<progress id="progress" value="30" max="100">100%</progress>
							<button type="button" data-increase="10">increase by 10</button>
							<button type="button" data-increase="-10">increase by -10</button>
							<button type="button" class="remove-value">remove value</button>
							<script>
								$('button[data-increase]').on('click', function(){
									var val = $('#progress').prop( 'value' ) || 0;
									var step = $(this).data('increase');
									$('#progress').prop( 'value', val + step );
									
									return false;
								});
								$('button.remove-value').on('click', function(){
									$('#progress').removeAttr( 'value' );
									return false;
								});
								
							</script>
						</div>
						
						<div class="form-element">
							<h4>Radio-Group Headline Short Labels  <dfn title="required">*</dfn></h4>
							<fieldset class="mod">
								<legend>Legend Short Labels  <dfn title="required">*</dfn></legend>
								<div class="form-item">
									<input type="radio" id="field6-1" name="radio-grp1-1" required />
									<label for="field6-1">
										Radiooption 2
									</label>
								</div>
								<div class="form-item">
									<input type="radio" id="field7-1" name="radio-grp1-1" />
									<label for="field7-1"> 
										Radiooption 2
									</label>
								</div>
								<div class="form-item">
									<input type="radio" id="field8-1" name="radio-grp1-1" />
									<label for="field8-1">
										Radiooption 3
									</label>
								</div>
							</fieldset>
						</div>
						
						<div class="button-wrapper">
							<input type="submit" value="Send" />
						</div>
					</fieldset>
				</form>
			</section>
			
			<aside>
				<hgroup>
					<h2>How to...</h2>
					<h3>Customized Demos / Code Snippets / Tutorials</h3>
				</hgroup>
				<div class="accordion">
					<h3 id="custom-error" class="button">... create custom stylable error messages</h3>
					<div class="panel">
						<p>Creating custom stylable error messages is simple (You won't see a difference in polyfilled browsers):</p>
						
<code class="block run-once">
/*bind to the first invalid element in a form*/
$('section.forms-demo').bind('firstinvalid.example1', function(e){ 
	/*show the invalid alert for first invalid element*/
	$.webshims.validityAlert.showFor( e.target ); 
	/*prevent browser from showing native validation message */
	return false; 
});

/*unbind event binding from second/next example:*/
$('section.forms-demo').unbind('firstinvalid.example2');
</code>
						<p>The validityAlert method will create the following custom styleable HTML:</p>
<code class="block">
&lt;div class="ws-popover validity-alert" role="alert"&gt;
	&lt;div class="ws-po-outerbox"&gt;
		&lt;div class="ws-po-arrow"&gt;&lt;div class="ws-po-arrowbox"&gt;&lt;/div&gt;&lt;/div&gt;
		&lt;div class="ws-po-box"&gt;ERRORMESSAGE&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
</code>
						
						<p>Using custom messages instead of native browser messages is also easy. Simply implement the customValidationMessage attribute and use it.</p>

<code class="block run-once">
/*configure webshims to implement new customValidationMessage attribute
$.webshims.setOptions('forms', {
	customMessages: true
});*/

/* load all polyfill features
 $.webshims.polyfill();*/

/* wait for DOM-Ready */
$(function(){
	/*bind to the first invalid element in a form*/
	$('section.forms-demo').bind('firstinvalid.example2', function(e){ 
		/* show the invalid alert for first invalid element and pass the custom validation message */
		$.webshims.validityAlert.showFor( e.target, $(e.target).prop('customValidationMessage') ); 
		/* prevent browser from showing native validation message */
		return false; 
	});
});


/*unbind event binding from first example:*/
$('section.forms-demo').unbind('firstinvalid.example1');
</code>
						<p>Instead of binding to the events your own, you can also simply set the configuration option <code>replaceValidationUI</code> to true:</p>
<code class="block">
//$.webshims.setOptions('forms', {
// 	//Use customizeable validation messages
//	customMessages: true,
//	//replace validation UI in all browsers
//	replaceValidationUI: true
//});

//load all polyfill features
//$.webshims.polyfill();

</code>
						<p>or use the content attribute API</p>
<code class="block">
&lt;label for="name"&gt;Name:&lt;/label&gt;
&lt;input id="name" required data-errormessage="Please tell us your Name" /&gt;
&lt;!-- or --&gt;
&lt;label for="name"&gt;Name:&lt;/label&gt;
&lt;input id="name" required x-moz-errormessage="Please tell us your Name" /&gt;
</code>
						<p>Note: We want you to learn how this works in HTML5. Instead of simply configuring and using our extensions, you can implement your own validation UI with a totally unique look and feel on top of the HTML5 standard. As a simple start you have to remove the browsers validation UI, which can be achieved by preventing the default behavior of an invalid event.</p>
<code class="block">
$('form').bind('invalid', function(e){
	//implement your validation UI here!!!
	e.preventDefault();
});
</code>
						<h4>Instant / Live Inline form validation</h4>
						<p>Webshims comes also with a simple Instant validation helper, simply add the class 'ws-instantvalidation' to your form element:</p>
<code class="block">
&lt;form class="ws-instantvalidation" action="#"&gt;
	&lt;div class="form-element"&gt;
		&lt;label&gt;email*:&lt;/label&gt;
		&lt;input type="email" required /&gt;
	&lt;/div&gt;
	&lt;div class="form-element"&gt;
		&lt;label&gt;password*:&lt;/label&gt;
		&lt;input type="password" required /&gt;
	&lt;/div&gt;
	&lt;div&gt;
		&lt;input type="submit" /&gt;
	&lt;/div&gt;
&lt;/form&gt;
</code>
						<form class="ws-instantvalidation" action="#">
							<div class="form-element">
								<label>email*:</label>
								<input type="email" required />
							</div>
							<div class="form-element">
								<label>password*:</label>
								<input type="password" required />
							</div>
							<div>
								<input type="submit" value="Send" />
							</div>
						</form>
						<p>More information about <a href="webforms/1-webforms-lang-custom-bubble.html">custom error messages/custom error bubbles</a> (also explains how to change the built-in text).</p>
					</div>
					<h3 id="custom-widget" class="button">... create/configure custom stylable slider/date widgets in all browser</h3>
					<div class="panel">
						<p>Simply change some configuration and you are ready.</p>
<code class="block">
/*configure webshims to use JS-Widgets instead of native widgets*/
$.webshims.setOptions('forms-ext', {
	replaceUI: true
});
</code>
					<p>More information about <a href="webforms/3-webforms-widgets.html">custom styleable input widgets</a>.</p>
					</div>
					<h3 id="custom-widget" class="button">... create custom validation rules</h3>
					<div class="panel">
						<p>There are several solution. You can try to use the <code>pattern attribute...</code></p>
<code class="block">
&lt;input pattern="[0-9][A-Z]{3}" title="A part number is a digit followed by three uppercase letters." /&gt;
</code>
						<p>... and for more complex constraint simply use the <code>setCustomValidity</code>-method:</p>
<code class="block">
	var testValidity = function(){
		if( hasError ) {
			$(this).setCustomValidity('This field has an error');
		} else {
			$(this).setCustomValidity('');
		}
	};
</code>
						<p>More information about <a href="webforms/4-webforms-custom-validity.html">custom validation constraints</a>.</p>
					</div>
				</div>
			</aside>
				
			<aside>
				<h3>Short forms examples with webshims lib</h3>
				<ul>
					<li><a href="http://jsfiddle.net/trixta/XqPhQ/">Instant / live form validation</a></li>
					<li><a href="http://jsfiddle.net/trixta/NnNKv/">Use of :user-error/.user-error to improve the usability of form validation</a></li>
					<li><a href="http://jsfiddle.net/trixta/SWQme/">Combining two date fields (field limits dynamically min/max attribute of the other field)</a></li>
					<li><a href="http://jsfiddle.net/trixta/werS3/">Combining input[type="range"] with an input[type="date"] using the new valueAsNumber property</a></li>
					<li><a href="http://jsfiddle.net/trixta/VNuct/">different input widget configurations</a></li>
					<li><a href="http://jsfiddle.net/trixta/DTqxA/">show validation message on focusout/blur</a></li>
					<li><a href="http://jsfiddle.net/trixta/tLXXN/">using changedvalid/changedinvalid events to create a nice form with a few lines</a></li>
					<li><a href="http://jsfiddle.net/trixta/7DETa/">input[list]/datalist demo using different markup</a></li>
					<li><a href="http://jsfiddle.net/trixta/Q2URr/">Dynamic input[list] / datalist demo</a></li>
				</ul>
			</aside>
			<aside>
				<h3>Links about Webforms</h3>
				<ul>
					<li><a href="https://developer.mozilla.org/en/HTML/HTML5/Forms_in_HTML5">Forms in HTML5 (by MDC)</a></li>
					<li><a href="http://diveintohtml5.info/forms.html">A Form of Madness (Dive Into HTML5)</a></li>
					<li><a href="http://hacks.mozilla.org/2010/11/firefox-4-html5-forms/">Firefox 4: HTML5 Forms (Mozilla Hacks)</a></li>
					<li><a href="http://dev.opera.com/articles/view/improve-your-forms-using-html5/">Improve your forms using HTML5! by Anne van Kesteren</a></li>
					<li><a href="http://www.alistapart.com/articles/forward-thinking-form-validation/">Forward Thinking Form Validation by Ryan Seddon</a></li>
				</ul>
			</aside>		
	</section>
	</div>
	</div>
	<footer>		
		<small>
			<strong>Note</strong>: every polyfill is a hack! innovative frontend development is hacky and always will be hacky!
		</small>
	</footer>
<!--[if lte IE 7]>
	<div class="browser-support"> 			
		<div class="browser-support-box"> 				
			Webshims Lib really cares about cross browser support and supports all A-Graded Browsers including IE6 and newest Opera. But I don't care about Styling/Layout issues in IE7- on this demo page.
		</div> 		
	</div>
<![endif]-->
</body>
</html>   
